<script setup>
import { reactive, onBeforeMount, ref, watch } from "vue";
// 引入存储状态
import { timestampToTime } from "../public/public";
// 创建存储实例
const props = defineProps({ dialogFormVisible: {}, token: {}, rowData: {} });
const dFVisible = ref(props.dialogFormVisible);
const emit = defineEmits(["isShow", "getNewData"]);
const userData = reactive({data:{}});

watch(
  () => props.dialogFormVisible,
  (val, preVal) => {
    dFVisible.value = val;
  }
);
// forms双向数据绑定，拿到的数据填充到表格中，====表格中的动态渲染
watch(()=>props.rowData, (val) => {
  userData.data = {...props.rowData}
});



// 弹出框的取消功能
function cancel() {
  dFVisible.value = false;
  // 取消时候直接传个false
  emit("isShow", false);
}
// 弹出框的登录功能
function submit() {
  dFVisible.value = false;
  // 根取消功能一样，子组件也把false 功能同步回了父组件
  emit("isShow", false);
  // 处理完后的表单需要传入父组件，
  emit("getNewData", userData.data);
}

// 点击空白/点击x号，按键盘esc功能
function close() {
  // 根取消功能一样，子组件也把false 功能同步回了父组件
  emit("isShow", false);
}
</script>

<template>
  <!-- 注意需要在before-colse：关闭时候的回调 写成绑定属性，否则找不到 -->
  <el-dialog v-model="dFVisible" title="修改公告" :before-close="close">
    <el-form :model="userData.data">
      <el-form-item label="公告标题：">
        <el-input v-model="userData.data.title" />
      </el-form-item>
      <el-form-item label="发 起 人：">
        <div>{{ userData.data.staffName }}</div>
      </el-form-item>
      <el-form-item label="任务内容：">
        <el-input v-model="userData.data.content" />
      </el-form-item>
      <el-form-item label="发起时间：">
        <div>{{ timestampToTime(userData.data.sendTime) }}</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
